<template>
	<view class="conter">

		<header-box :title="'出售列表'"></header-box>


		<!-- <u-search placeholder="搜索地址..." v-model="keyword" :show-action="fasle"></u-search> -->

		<view class="conter-box1">
			<view class="wrap">
				<u-waterfall v-model="flowList.sell" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-warter" v-for="(item, index) in leftList" :key="index"
							@click="navGetto(item.id)">
							<!-- <view class="bgc1"> -->
								<!-- <u-lazy-load height="340" threshold="-450" border-radius="10" :image="'https://wumei.qianjitianxia.com' + item.image" :index="index"
									style="width: 340rpx; height: 370rpx;">
								</u-lazy-load> -->
								
								<image class="w340 h370 r20"  :src="'https://wumei.qianjitianxia.com' + item.image" mode=""></image>
								<!-- <view class="bgc">
									4 张
								</view> -->
							<!-- </view> -->
							<view class="demo-title">
								{{item.title}}
							</view>
							<view class="demo-tag ">
								<!-- <view class="" style="display: flex; ">
									<view class="demo-tag-owner">
										<image :src="item.picture" mode=""
											style="width: 340rpx; height: 370rpx;border-radius: 30rpx;"></image>
									</view>
									<view class="demo-tag-text">
										{{item.createdate}}
									</view>
								</view> -->
								<view class=" flex justify-between align-center" style="white-space: nowrap;">
									<view class="demo-tag-text">
										已售 {{item.count}}
									</view>
									<view class="color-fs">
										￥ {{item.money}}
									</view>
								</view>
							</view>
							<!-- <view class="demo-shop">
								{{item.shop}}
							</view> -->
							<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> -->
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-warter" v-for="(item, index) in rightList" :key="index"
							@click="navGetto(item.id)">
							<!-- <u-lazy-load threshold="-450" border-radius="10" :image="'https://wumei.qianjitianxia.com' + item.image" :index="index">
							</u-lazy-load> -->
							
							<image class="w340 h370 r20"  :src="'https://wumei.qianjitianxia.com' + item.image" mode=""></image>
							<view class="demo-title">
								{{item.title}}
							</view>
							<!-- <view class="demo-price">
								{{item.price}}元
							</view> -->
							<view class="demo-tag">
								<view class="" style="display: flex; ">
									<!-- <view class="demo-tag-owner">
										<image :src="item.picture"
											style="width: 100%;height: 100%;border-radius: 30rpx;"></image>
									</view> -->
								</view>
								<view class=" flex justify-between align-center" style="white-space: nowrap;">
									<view class="demo-tag-text">
										已售 {{item.count}}
									</view>
									<view class="color-fs">
										￥ {{item.money}}
									</view>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
				<!-- <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore> -->
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				keyword: '',
				title: '出售列表',
				loadStatus: 'loadmore',
				flowList: {},
				info: '',
				listfrom: [],
				totalLength: '',
				img: this.$images,
			}
		},
		onLoad(e) {},
		onShow() {
			this.userInfo()
		},
		onReachBottom() {
			if (this.totalLength < 10) return this.$tools.msg('没有更多了！')
			this.page++
			this.userInfo()
		},
		methods: {

			async userInfo() {
				const res = await this.$u.post('api/hotel/me?uid=' + uni.getStorageSync('uid'))
				this.flowList = res.data
				this.totalLength = res.data.sell.length
				console.log('请求成功userInfo', this.flowList)
			},

			navGetto(init) {
				uni.navigateTo({
					url: '/pages/site/phoneInfo?id=' + init
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.conter {
		width: 100%;
		height: 100vh;
		padding: 0 30rpx;
		background-color: #FFFFFF;

		image {
			width: 100%;
			height: 100%;
		}

		.conter-box1 {



			.demo-warter {
				width: 340rpx;
				height: 426rpx;
				border-radius: 10rpx;
				// margin: 30rpx 0;
				margin-bottom: 130rpx;
				// background-color: #EEEEEE;
				padding: 8px;
				position: relative;

				.bgc1 {
					// position: relative;

					.bgc {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						padding: 11rpx 36rpx;
						color: #FFFFFF;
						font-size: 26rpx;
						border-radius: 20rpx;
						background: rgba(255, 255, 255, 0.1);
					}
				}


			}

			.u-close {
				position: absolute;
				top: 32rpx;
				right: 32rpx;
			}

			.demo-image {
				width: 100%;
				border-radius: 4px;
			}

			.demo-title {
				width: 320rpx;
				font-size: 30rpx;
				margin-top: 5px;
				color: #232323;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.demo-tag {
				// display: flex;
				// align-items: center;
				// justify-content: space-between;
				margin-top: 22rpx;
				height: 200rpx;

				.color-fs {
					color: #FF0000;
				}
			}

			.demo-tag-owner {
				color: #FFFFFF;
				display: flex;
				width: 50rpx;
				border-radius: 30rpx;
				// height: 50rpx;
				// align-items: center;
				// padding: 4rpx 14rpx;
				border-radius: 50rpx;
				font-size: 20rpx;
				line-height: 1;
			}

			.demo-tag-text {
				padding: 13rpx 32rpx;
				border-radius: 35rpx;
				color: #ECA700;
				font-size: 24rpx;
				background: RGBA(253, 246, 229, 1);
			}

			.demo-price {
				font-size: 30rpx;
				color: $u-type-error;
				margin-top: 5px;
			}

			.demo-shop {
				font-size: 22rpx;
				color: $u-tips-color;
				margin-top: 5px;
			}



		}

	}
</style>
